<template>
  <div>
    <div class="main">
      <el-tree
        :data="tree"
        :props="defaultProps"
        default-expand-all
        @node-click="handleNodeClick"
        style="max-height: 560px;overflow: auto;"
      ></el-tree>
      <div style="width: 100%;border-top: 1px solid #F5F7FA;padding: 4px 0">
        <we-button @click="editNode" type="primary" size="small"
          ><em class="el-icon-edit"></em> 编辑
        </we-button>
        <we-button @click="deleteNode" type="primary" size="small"
          ><em class="el-icon-delete"></em> 删除
        </we-button>
        <we-button @click="queryNode" type="primary" size="small"
          ><em class="el-icon-search"></em> 查询
        </we-button>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog
      title="花名册定制"
      :visible.sync="editBox"
      class="dialogClass"
      :close-on-click-modal='false'
      width="60%">
      <el-steps :active="active" finish-status="success" style="width:70%">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
      <!-- 第一步 -->
      <template v-if="active === 0">
        <el-row :gutter="10" style="margin-top:10px;">
          <el-col :span="10">
            <div style="line-height: 40px;">
              <span>选择指标集：</span>
              <el-select @change="selectSubsetUuid" v-model="selectSubset" filterable size="mini" style="width:230px">
                <el-option
                  v-for="item in allSubset"
                  :key="item.uuid"
                  :label="item.tableTxt"
                  :value="item.uuid">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="2">
            <div style="opacity: 0;">0</div>
          </el-col>
          <el-col :span="10">
            <we-button @click="delAll" size="small" style="float:right"
              ><em class="el-icon-delete"></em> 清空
            </we-button>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10">
            <span class="col_title" style="color:#ff0000;">备选指标</span>
          </el-col>
          <el-col :span="2">
            <div style="opacity: 0;">0</div>
          </el-col>
          <el-col :span="10">
            <span class="col_title" style="color:#008000;">已选指标</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10" class="col_h_b">
            <el-checkbox-group v-model="checkedLeft" style="margin-top:15px;">
              <div style="height:10px;background:#fff;"></div>
              <div style="line-height: 25px;" v-for="(item,index) in left" :key="index">
                <el-checkbox :checked="item.checked" :label="item" style="margin-right:5px;">{{item.fieldTxt}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </el-col>
          <el-col :span="2">
            <div style="margin-top:70px;text-align:center;">
              <el-button @click="toRightAll" type="primary" size="small"
                ><em class="el-icon-d-arrow-right"></em>
              </el-button>
            </div>
            <div style="margin-top:10px;text-align:center;">
              <el-button @click="toRight" type="primary" size="small"
                ><em class="el-icon-arrow-right"></em>
              </el-button>
            </div>
            <div style="margin-top:40px;text-align:center;">
              <el-button  @click="toLeft" type="primary" size="small"
                ><em class="el-icon-arrow-left"></em>
              </el-button>
            </div>
            <div style="margin-top:10px;text-align:center;">
              <el-button  @click="toLeftAll" type="primary" size="small"
                ><em class="el-icon-d-arrow-left"></em>
              </el-button>
            </div>
          </el-col>
          <el-col :span="10" class="col_h_b">
            <div>
              <el-checkbox-group v-model="checkedRight">
                <div style="height:20px;background:#fff;"></div>
                <div style="line-height: 25px;" v-for="(item,index) in right" :key="index">
                  <el-checkbox :checked="item.checked" :label="item" style="margin-right:5px;">{{item.fieldTxt}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </el-col>
          <el-col :span="2">
            <div style="margin-top:70px;text-align:center;">
              <el-button @click="toUpAll" type="primary" style="width:10px" size="small"
                ><em class="el-icon-d-arrow-right" style="margin:-10px;transform:rotate(-90deg);"></em>
              </el-button>
            </div>
            <div style="margin-top:10px;text-align:center;">
              <el-button @click="toUp" type="primary" style="width:10px" size="small"
                ><em class="el-icon-arrow-up" style="margin:-10px"></em>
              </el-button>
            </div>
            <div style="margin-top:40px;text-align:center;">
              <el-button @click="toDown" type="primary" style="width:10px" size="small"
                ><em class="el-icon-arrow-down" style="margin:-10px"></em>
              </el-button>
            </div>
            <div style="margin-top:10px;text-align:center;">
              <el-button @click="toDownAll" type="primary" style="width:10px" size="small"
                ><em class="el-icon-d-arrow-right" style="margin:-10px;transform:rotate(90deg);"></em>
              </el-button>
            </div>
          </el-col>
        </el-row>
      </template>
      <!-- 第二步 -->
      <template v-if="active === 1">
        <el-row :gutter="10">
          <el-col :span="10" class="col_h_b">
            <div style="line-height: 40px;">
              <span>指标集：</span>
              <el-select @change="selectSubsetUuid" v-model="selectSubset" filterable size="mini" style="width:230px">
                <el-option
                  v-for="item in allSubset"
                  :key="item.uuid"
                  :label="item.tableTxt"
                  :value="item.uuid">
                </el-option>
              </el-select>
            </div>
            <el-checkbox-group v-model="checkedLeft">
              <div style="line-height: 25px;" v-for="(item,index) in left" :key="index">
                <el-checkbox :checked="item.checked" :label="item" style="margin-right:5px;">{{item.fieldTxt}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </el-col>
          <el-col :span="2">
            <div style="margin-top:70px;text-align:center;">
              <el-button @click="toRight" type="primary" size="small"
                ><em class="el-icon-arrow-right"></em>
              </el-button>
            </div>
            <div style="margin-top:40px;text-align:center;">
              <el-button  @click="toLeft" type="primary" size="small"
                ><em class="el-icon-arrow-left"></em>
              </el-button>
            </div>
          </el-col>
          <el-col :span="10" class="col_h_b">
            <div>
              <div class="flex_bet line_h">
                <div><span>默认排序</span></div>
                <div>
                  <we-button size="mini" @click="delItem" style="line-height: 0">删除</we-button>
                  <we-button size="mini" @click="delAll" style="line-height: 0">全部删除</we-button>
                </div>
              </div>
              <el-row style="line-height: 25px;">
                <el-col :span="17"># <span style="padding-left:10px">指标</span></el-col>
                <el-col :span="7">排序</el-col>
              </el-row>
              <el-checkbox-group v-model="checkedRight">
                <el-row style="line-height: 25px;" v-for="(item,index) in right" :key="index">
                  <el-col :span="17">
                    <el-checkbox :checked="item.checked" :label="item" style="margin-right:5px;">{{item.fieldTxt}}</el-checkbox>
                  </el-col>
                  <el-col :span="7">
                    <el-select v-model="item.sort" value-key="item.sort" filterable size="mini" class="mini_select">
                      <el-option key="1" label="升序" value="1"></el-option>
                      <el-option key="2" label="降序" value="2"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
          </el-col>
        </el-row>
      </template>
      <!-- 第三步 -->
      <template v-if="active === 2">
        <el-tree
          style="min-height:280px;border:1px solid #eee;width:95%;padding:15px;margin-top:10px;"
          :data="tree"
          :props="defaultProps"
          default-expand-all
          @node-click="step3NodeClick"></el-tree>
        <div style="margin-top:20px;">
          <span>保存名称：</span>
          <el-input v-model="editName" style="width:80%" size="mini" placeholder="请输入名称"></el-input>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <we-button v-if="active === 1 || active === 2" @click="before" size="small" style="margin-right:50px;">上一步</we-button>
        <we-button v-if="active === 0 || active === 1" @click="next" size="small" style="margin-right:50px;">下一步</we-button>
        <we-button v-if="active === 2" size="small" style="margin-right:50px;">保存</we-button>
        <we-button @click="editBox = false" size="small">取 消</we-button>
      </span>
    </el-dialog>
    <!-- 编辑弹窗 -->

  </div>
</template>

<script>
import WeButton from '@/components/WeButton'
// import { parseTree } from '@/utils/util'
import { getAction, postAction, deleteAction } from '@/api/manage'
import {queryCondition} from "@/api/apiUrl";
export default {
  components: {
    WeButton
  },
  data () {
    return {
      tree: [{
        id: 1,
        label: '通用',
        children: [{
          id: 4,
          label: '人员基本情况'
        }]
      }, {
        id: 2,
        label: '个人'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      active: 0,
      editBox: false,
      selectSubset: '', // 选中子集的uuid
      allSubset: [], // 所有子集
      editName: '',
      left: [], // 左边数据
      right: [], // 右边数据
      checkedLeft: [], // 选中左边数据
      checkedRight: [], // 选中右边数据
      step1Data: [], // 存储步骤一的数据
      step2Data: [], // 存储步骤二的数据
      selectTree: null, // 选中的树节点
      step3selectTree: null // 步骤三选中的树节点
    }
  },
  created () {
    this.getSubset()
  },
  methods: {
    /**
     * 编辑节点
     */
    editNode () {
      if (this.selectTree) {
        this.editBox = true
      } else {
        this.$message({
          type: 'warning',
          message: '请先选中节点'
        })
      }
    },
    /**
     * 删除节点
     */
    deleteNode () {
      if (this.selectTree) {
        this.$confirm('确定要删除该节点吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    /**
     * 查询节点
     */
    queryNode () {

    },
    /**
     * 右箭头
     */
    toRight () {
      this.right = this.handleConcatArr(this.right, this.checkedLeft)
      this.handleRemoveTabList(this.checkedLeft, this.left)
      this.checkedLeft = []
    },
    /**
     * 左箭头
     */
    toLeft () {
      this.left = this.handleConcatArr(this.left, this.checkedRight)
      this.handleRemoveTabList(this.checkedRight, this.right)
      this.checkedRight = []
    },
    handleConcatArr (selectArr, nowSelectData) {
      if (this.active === 1) {
        nowSelectData.map(i => { i.sort = '1' })
      }
      let arr = []
      arr = arr.concat(selectArr, nowSelectData)
      return arr
    },
    handleRemoveTabList (checkArr, originalArr) {
      for (const item of checkArr) {
        if (originalArr.indexOf(item) > -1) {
          this.$nextTick(() => {
            originalArr.splice(originalArr.indexOf(item), 1)
          })
        }
      }
    },
    /**
     * 右箭头全部
     */
    toRightAll () {
      this.right = this.handleConcatArr(this.right, this.left)
      this.handleRemoveTabList(this.left, this.left)
      this.checkedLeft = []
    },
    /**
     * 左箭头全部
     */
    toLeftAll () {
      this.left = this.handleConcatArr(this.left, this.right)
      this.handleRemoveTabList(this.right, this.right)
      this.checkedRight = []
    },
    /**
     * 上箭头
     */
    toUp () {
      if (this.checkedRight.length === 1) {
        const index = this.right.findIndex(item => item.fieldTxt === this.checkedRight[0].fieldTxt)
        if (index !== 0) {
          this.right[index] = this.right.splice(index - 1, 1, this.right[index])[0]
        } else {
          this.right.push(this.right.shift())
        }
      }
    },
    /**
     * 下箭头
     */
    toDown () {
      if (this.checkedRight.length === 1) {
        const index = this.right.findIndex(item => item.fieldTxt === this.checkedRight[0].fieldTxt)
        if (index !== this.right.length - 1) {
          this.right[index] = this.right.splice(index + 1, 1, this.right[index])[0]
        } else {
          this.right.unshift(this.right.splice(index, 1)[0])
        }
      }
    },
    /**
     * 上箭头全部
     */
    toUpAll () {
      if (this.checkedRight.length === 1) {
        const index = this.right.findIndex(item => item.fieldTxt === this.checkedRight[0].fieldTxt)
        if (index !== 0) {
          this.right.unshift(this.right.splice(index, 1)[0])
        }
      }
    },
    /**
     * 下箭头全部
     */
    toDownAll () {
      if (this.checkedRight.length === 1) {
        const index = this.right.findIndex(item => item.fieldTxt === this.checkedRight[0].fieldTxt)
        if (index !== 0) {
          this.right.push(this.right.splice(index, 1)[0])
        }
      }
    },
    /**
     * 选中的子集uuid
     */
    selectSubsetUuid (e) {
      if (e) {
        this.selectSubset = e
      }
      postAction('/opTableField/opTableFieldSearch', { tableUuid: this.selectSubset })
        .then((res) => {
          if (res.code === 200) {
            if (this.active === 0) {
              if (this.step1Data.length === 0) {
                this.left = res.data
              } else {
                for (let i = 0; i < this.step1Data.length; i++) {
                  const index = res.data.findIndex(item => item.fieldTxt === this.step1Data[i].fieldTxt)
                  if (index !== -1) {
                    res.data.splice(index, 1)
                  }
                }
                this.left = res.data
              }
              return
            }
            if (this.active === 1) {
              if (this.step2Data.length === 0) {
                this.left = res.data
              } else {
                for (let i = 0; i < this.step2Data.length; i++) {
                  const index = res.data.findIndex(item => item.fieldTxt === this.step2Data[i].fieldTxt)
                  if (index !== -1) {
                    res.data.splice(index, 1)
                  }
                  this.left = res.data
                }
              }
            }
          }
        })
    },
    /**
     * 单个删除
     */
    delItem () {
      this.left = this.handleConcatArr(this.left, this.checkedRight)
      this.handleRemoveTabList(this.checkedRight, this.right)
      this.checkedRight = []
    },
    /**
     * 删除全部
     */
    delAll () {
      this.left = this.handleConcatArr(this.left, this.right)
      this.right = []
      this.checkedRight = []
    },
    /**
     * 上一步
     */
    before () {
      this.active--
      if (this.active === 0) {
        if (this.right.length !== 0) {
          this.step2Data = JSON.parse(JSON.stringify(this.right))
        }
        if (this.step1Data.length !== 0) {
          this.right = JSON.parse(JSON.stringify(this.step1Data))
        }
        this.left = []
        this.selectSubsetUuid()
      }
      if (this.active === 1) {
        if (this.step2Data.length !== 0) {
          this.right = JSON.parse(JSON.stringify(this.step2Data))
        }
        this.left = []
        this.selectSubsetUuid()
      }
    },
    /**
     * 下一步
     */
    next () {
      if (this.active === 0) {
        if (this.right.length !== 0) {
          this.step1Data = JSON.parse(JSON.stringify(this.right))
          if (this.step2Data.length !== 0) {
            this.right = JSON.parse(JSON.stringify(this.step2Data))
          } else {
            this.right = []
          }
          this.left = []
          this.active++
          this.selectSubsetUuid()
          return
        }
        return
      }
      if (this.active === 1) {
        this.step2Data = JSON.parse(JSON.stringify(this.right))
        if (this.step2Data.length !== 0) {
          this.right = JSON.parse(JSON.stringify(this.step2Data))
        } else {
          this.right = []
        }
        this.left = []
        this.active++
        this.selectSubsetUuid()
      }
    },
    /**
     * 选中的节点
     */
    handleNodeClick (e) {
      this.selectTree = e
    },
    /**
     * 步骤三选中的节点
     */
    step3NodeClick (e) {
      this.step3selectTree = e
    },
    /**
     * 获取所有子集
     */
    async getSubset () {
      const result = await getAction(queryCondition.conditionsList)
      if (result.code === 200) {
        this.allSubset = result.data
        // for (let i = 0; i < result.data.length; i++) {
        //   if (result.data[i].tableTxt.indexOf('子集') !== -1) {
        //     this.allSubset.push(result.data[i])
        //   }
        // }
      }
    }
  }
}
</script>

<style scoped lang="less">
html, body, div {
  font-size: 14px;
  box-sizing: border-box;
}
.main {
  width:500px;
  margin:20px auto;
  text-align: center;
  border: 1px solid #F5F7FA;
  border-radius: 8px;
}
.dialogClass /deep/ .el-dialog__body {
  padding: 15px 20px 30px;
}
.tab {
  margin-bottom: 20px;
}
.line_h {
  line-height: 40px;
}
.flex_bet {
  display: flex;
  justify-content: space-between;
}
.col_h_b {
   height: 400px;
   border: 1px solid #eee;
   border-radius: 5px;
   margin-top: 10px;
   overflow-y: auto;
}
.mini_select {
  width: 60px;
  height: 30px;
}
.mini_select /deep/ .el-input__inner {
  padding: 5px !important;
}
.mini_select /deep/ .el-input__suffix {
  right: -2px;
}
.col_title {
  position: relative;
  background: #fff;
  padding: 5px;
  left: 10px;
  font-weight: 700;
  bottom: -17px;
  z-index: 1;
}
</style>
